<template>
	<div class="wangeditor" style="border: 1px solid #d9d9d9">
		<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" />
		<Editor v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" style="height: 500px; overflow-y: hidden" @onCreated="handleCreated" />
	</div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { onBeforeUnmount, computed, shallowRef, onMounted, reactive } from 'vue';
import OSS from 'ali-oss';
import { nanoid } from 'nanoid';
import { getSsoUrl } from '/@/api/system';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	disabled: {
		type: Boolean,
		default: false,
	},
});
const mode = 'default';
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = computed({
	get() {
		return props.modelValue;
	},
	set(val: string) {
		// 防止富文本内容为空时，校验失败
		if (editorRef.value.isEmpty()) val = '';
		emit('update:modelValue', val);
	},
});

let ossData = reactive({
	accessKeyId: '',
	accessKeySecret: '',
	securityToken: '',
});
let ossClient: any;
//限制上传格式
const beforeImgUpload = async (file_: any) => {
	const accept1 = '.jpeg,.jpg,.png,,';
	const file = file_;
	const fileType = file?.name.split('.');
	const fileDate = fileType.slice(-1);
	const docsArr = accept1?.split(',');
	if (!docsArr?.includes(`.${fileDate[0]}`)) {
		ElMessage.error(`图片仅支持文件格式：${accept1}格式附件!`);
		return false;
	}
	const isLt2M = file.size / 1024 / 1024 < 500;
	if (!isLt2M) {
		ElMessage.error(`图片大小不能超过500MB!`);
		return false;
	}
	return true;
};
//限制上传格式
const beforeVideoUpload = async (file_: any) => {
	const accept2 = '.mp4,.avi,.mov,.wmv,';
	const file = file_;
	const fileType = file?.name.split('.');
	const fileDate = fileType.slice(-1);
	const docsArr = accept2?.split(',');
	if (!docsArr?.includes(`.${fileDate[0]}`)) {
		ElMessage.error(`视频仅支持文件格式：${accept2}格式附件!`);
		return false;
	}
	const isLt2M = file.size / 1024 / 1024 < 30;
	if (!isLt2M) {
		ElMessage.error(`视频大小不能超过30MB!`);
		return false;
	}
	return true;
};
//覆盖默认上传
const uploadFile = async (file: any, fileType: any) => {
	let type;
	if (fileType == 0) {
		type = await beforeImgUpload(file);
	} else {
		type = await beforeVideoUpload(file);
	}
	if (!type) {
		return;
	}
	let res = await upload(file);
	return res;
};
//获取oss临时上传
async function getOSSUrl() {
	await getSsoUrl({}).then((res: any) => {
		if (res.code == 200) {
			ossData = res.data;
			ossClient = new OSS({
				endPoint: ossData.endPoint,
				region: ossData.region, // 为存储空间对应的地域域名，根据你的实际情况填写，如https://oss-cn-hangzhou.aliyuncs.com
				accessKeyId: ossData.accessKeyId, //  你的阿里云accessKeyId
				accessKeySecret: ossData.accessKeySecret, //  临时token  accessKeySecret: credentials.accessKeySecret,  //  你的阿里云accessKeySecret
				stsToken: ossData.securityToken,
				bucket: ossData.bucket, //  oss存储桶的名称
				// secure: ossData.secure, //http是false，https是true
				secure: true,
			});
		}
	});
}
//oss切片上传
async function upload(file: any) {
	await getOSSUrl();
	const uuid = nanoid();
	const index = file.name.lastIndexOf('.');
	const suffix = file.name.substring(index + 1);
	let fileName = 'other' + '/' + uuid + '.' + suffix;
	return ossClient.multipartUpload(fileName, file, {
		progress: function (p: any) {
			console.log(p);
		},
		partSize: 20 * 1024 * 1024,
	});
}
// 模拟 ajax 异步获取内容
onMounted(() => {});

const toolbarConfig: any = { excludeKeys: 'fullScreen' };
const editorConfig = {
	placeholder: '请输入内容...',
	MENU_CONF: {
		uploadImage: {
			// 设置上传图片的服务端地址
			// server: 'http://124.223.11.95:8081/admin/common/upload2',
			// 单个文件大小限制，单位 byte
			maxFileSize: 500 * 1024 * 1024, // 2MB
			// 上传时附带的参数
			// fieldName: 'file',
			customInsert(res: any, insertFn: any) {
				// TS 语法
				// customInsert(res, insertFn) {                  // JS 语法
				// res 即服务端的返回结果
				if (res.code == 200) {
					// 从 res 中找到 url alt href ，然后插入图片
					insertFn(res.data.showUrl);
				}
			},
			customUpload: async (file: any, insertFn: any) => {
				let res = await uploadFile(file, 0);
				if (res.res.status == 200) {
					ElMessage.success('上传成功！');
				} else {
					ElMessage.success('上传失败！');
				}
				insertFn(res.res.requestUrls[0].split('?')[0]);
			},
		},
		uploadVideo: {
			// 设置上传图片的服务端地址
			// server: 'http://124.223.11.95:8081/admin/common/upload2',
			// 单个文件大小限制，单位 byte
			maxFileSize: 500 * 1024 * 1024, // 2MB
			// 上传时附带的参数
			// fieldName: 'file',
			customInsert(res: any, insertFn: any) {
				// TS 语法
				// customInsert(res, insertFn) {                  // JS 语法
				// res 即服务端的返回结果
				if (res.code == 200) {
					// 从 res 中找到 url alt href ，然后插入图片
					insertFn(res.data.showUrl);
				}
			},
			customUpload: async (file: any, insertFn: any) => {
				let res = await uploadFile(file, 1);
				if (res.res.status == 200) {
					ElMessage.success('上传成功！');
				} else {
					ElMessage.success('上传失败！');
				}
				insertFn(res.res.requestUrls[0].split('?')[0]);
			},
		},
	},
};

const handleCreated = (editor: any) => {
	// 记录 editor 实例，重要！
	editorRef.value = editor;
	if (props.disabled) {
		editorRef.value.disable();
	}
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});
</script>
